<template>
    <div class="content-wrapper-view">
		<div class="add_page_container">
            
            <el-row class="body">
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="18">
                                    <el-tabs v-model="activeName" @tab-click="handleClick">
                                        <el-tab-pane label="商品基本信息" name="base">
                                            <el-row class="body">
                                                <el-col>
                                                    <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="80px" class="cms-form">

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="工号" prop="num">
                                                                    <el-input v-model="form.num" placeholder="工号"></el-input>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="姓名" prop="name">
                                                                    <el-input v-model="form.name" placeholder="姓名"></el-input>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="性别" prop="sex">
                                                                    <el-select v-model="form.sex" placeholder="性别" style="width: 100%">
                                                                        <el-option
                                                                                v-for="item in sexOptions"
                                                                                :key="item.key"
                                                                                :label="item.label"
                                                                                :value="item.key"
                                                                        >
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="出生日期" prop="birthDate">
                                                                    <el-date-picker v-model="form.birthDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="手机号码" prop="mobile">
                                                                    <el-input v-model="form.mobile" placeholder="手机号码"></el-input>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="邮箱地址" prop="email">
                                                                    <el-input v-model="form.email" placeholder="邮箱地址"></el-input>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-form-item label="联系地址">
                                                            <el-input v-model="form.address" placeholder="地址"></el-input>
                                                        </el-form-item>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="毕业学校">
                                                                    <el-input v-model="form.university" placeholder="毕业学校"></el-input>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="毕业日期">
                                                                    <el-date-picker v-model="form.graduationDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="所学专业">
                                                                    <el-input v-model="form.profession" placeholder="专业"></el-input>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="所属部门">
                                                                    <el-cascader
                                                                        clearable
                                                                        :options="organizationOptions"
                                                                        :props="defaultProps"
                                                                        v-model="orgIds"
                                                                        @change="handleChangeOrganizationCascader"
                                                                        :show-all-levels="false"
                                                                        placeholder="机构部门" 
                                                                        style="width: 100%"
                                                                        >
                                                                    </el-cascader>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="所属岗位">
                                                                    <el-cascader
                                                                        clearable
                                                                        :options="positionOptions"
                                                                        :props="defaultProps"
                                                                        v-model="positionIds"
                                                                        @change="handleChangePositionCascader"
                                                                        :show-all-levels="false"
                                                                        placeholder="岗位" 
                                                                        style="width: 100%"
                                                                        >
                                                                    </el-cascader>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="到岗时间">
                                                                    <el-date-picker v-model="form.toPositionDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="员工状态">
                                                                    <el-select v-model="form.empState" placeholder="请选择员工状态" style="width: 100%">
                                                                        <el-option
                                                                                v-for="item in empStateOptions"
                                                                                :key="item.key"
                                                                                :label="item.label"
                                                                                :value="item.key"
                                                                                >
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="员工类型">
                                                                    <el-select v-model="form.empType" placeholder="请选择员工类型" style="width: 100%">
                                                                        <el-option
                                                                                v-for="item in empTypeOptions"
                                                                                :key="item.key"
                                                                                :label="item.label"
                                                                                :value="item.key"
                                                                                >
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="职称等级">
                                                                    <el-select v-model="form.empLevel" placeholder="请选择职称等级" style="width: 100%">
                                                                        <el-option
                                                                                v-for="item in empLevelOptions"
                                                                                :key="item.key"
                                                                                :label="item.label"
                                                                                :value="item.key"
                                                                                >
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="入职时间">
                                                                    <el-date-picker v-model="form.entryDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="转正日期">
                                                                    <el-date-picker v-model="form.becomeDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="离职日期">
                                                                    <el-date-picker v-model="form.dimissionDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
                                                                </el-form-item>
                                                                
                                                            </el-col>
                                                        </el-row>


                                                        <el-form-item label="个人简历" class="detail" style="padding-right: 3px;">
                                                            <tinymce :height="300" v-model="form.vitae" />
                                                        </el-form-item>

                                                    </el-form>
                                                </el-col>
                                            </el-row>
                                        </el-tab-pane>
                                        <el-tab-pane label="规格配置" name="spec">
                                            <el-row class="body">
                                                <el-col>
                                                   
                                                    <el-row style="margin-bottom: 20px;">
                                                        <el-col>
                                                            
                                                        </el-col>
                                                    </el-row>

                                                </el-col>
                                            </el-row>
                                            

                                        </el-tab-pane>
                                    </el-tabs>
                                </el-col>
                                <el-col :span="6">
                                    <div class="title"></div>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card" style="margin-top: 12px">
                                                <div slot="header" class="clearfix">
                                                    <span class="card-header"><i class="el-icon-search"></i> 员工头像</span>
                                                </div>
                                                <div class="text item avatar-box">
                                                    <el-upload
                                                        class="avatar-uploader"
                                                        :action="UPLOAD_URL"
                                                        :data="data"
                                                        :show-file-list="false"
                                                        :on-success="handleUploadSuccess"
                                                        :before-upload="handleBeforeUpload">
                                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    </el-upload>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card">
                                                <el-row class="publish-card">
                                                    <el-col>

                                                        <el-row class="margin-bottom-20">
                                                            <el-col>
                                                                <span class="text">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                                                                <el-select v-model="form.status" placeholder="请选择">
                                                                    <el-option
                                                                            v-for="item in statusOptions"
                                                                            :key="item.key"
                                                                            :label="item.label"
                                                                            :value="item.key"
                                                                            >
                                                                    </el-option>
                                                                </el-select>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row class="footer">
                                                            <el-col>
                                                                <el-button v-if="this.params.id == null" @click="create('form')" type="primary" icon="el-icon-search">提 交</el-button>
                                                                <el-button v-if="this.params.id != null" @click="update('form')" type="primary" icon="el-icon-search">修 改</el-button>
                                                            </el-col>
                                                        </el-row>

                                                    </el-col>
                                                </el-row>

                                            </el-card>
                                        </el-col>
                                    </el-row>

                                    
                                    
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    
                </el-col>
            </el-row>

            <back></back>
            <back-to-top></back-to-top>
        </div>
    </div>
</template>

<script>
    import { created, updated, deleted, selectOne, selectList, selectPage } from '@/api/oa/OaPerson'
    import { selectTree as selectOrganizationTree } from "@/api/oa/OaOrganization";
    import { selectTree as selectPositionTree } from "@/api/oa/OaPosition";
    import { UPLOAD_URL } from '@/api/system/user'
    import avatar from '@/assets/images/avatar/avatar1.jpeg'
    import { removeByValue } from '@/libs/utils'
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import Back from "@/components/Back";
    import BackToTop from "@/components/BackToTop";
    import Tinymce from "@/components/Tinymce";
    import valid from '@/libs/rules'

    const sexOptions = [{label: '男', key: 1}, {label: '女', key: 2}, {label: '未知', key: 3}]
    const statusOptions = [{label: '正常', key: true}, {label: '禁用', key: false}]
    const empStateOptions = [{label: '在职', key: 1}, {label: '离职', key: 2}, {label: '停薪留职', key: 3}, {label: '退休', key: 4}]
    const empTypeOptions = [{label: '正式工', key: 1}, {label: '合同工', key: 2}, {label: '临时工', key: 3}, {label: '试用期员工', key: 4}]
    const empLevelOptions = [{label: '普通职员', key: 1}, {label: '高级职员', key: 2}, {label: '核心员工', key: 3}]

    export default {
        name: 'AddPerson',
        components: {
            Back, BackToTop, Tinymce
        },
        data() {
            let required = valid.required('此项必填')
            return {
                /**
                 * id
                 */
                params: this.$route.query, //前一个页面带过来的数据
                sexOptions,
                statusOptions,
                empStateOptions,
                empTypeOptions,
                empLevelOptions,
                avatar,
                loading: false,
                loadingGetTags: false,
                activeName: 'base',
                form: {
                    orgId: null,
                    positionId: null,
                    orgPath: null,
                    positionPath: null,
                    vitae: null,
                    avatar: null
                },

                imageUrl: '',
                UPLOAD_URL,
                data: {
                    ossNam: 'qiniuyun',
                    bucketName: 'test',
                    prefixName: 'avatar'
                },
                

                rules: {
                    num: [required],
                    name: [required],
                    mobile: [required],
                    email: [required],
                    mobile: [required],
                    sex: [required],
                    birthDate: [required],
                },

                organizationOptions: [],
                positionOptions: [],
                defaultProps: {
                    label: "name",
                    value: "id",
                    children: "children"
                },
                orgIds: [],
                positionIds: [],
            }
        },
        
        created() {
            this.getOrganizationOptions()
            this.getPositionOptions()
            if(this.params.id) {
                this.getData()
            }
        },

        methods: {
            
            handleClick(tab, event) { //Tabs点击
            },
            
            handleChangeOrganizationCascader(value) {
                if(value.length > 0) {
                    this.form.orgId = value[value.length - 1]
                    this.form.orgPath = value.join(',')
                } else {
                    this.form.orgId = null
                    this.form.orgPath = null
                }
            },
            handleChangePositionCascader(value) {
                if(value.length > 0) {
                    this.form.positionId = value[value.length - 1]
                    this.form.positionPath = value.join(',')
                } else {
                    this.form.positionId = null
                    this.form.positionPath = null
                }
            },
            getOrganizationOptions() {
                selectOrganizationTree().then(response => {
                    this.organizationOptions = response.data.data;
                });
            },
            getPositionOptions() {
                selectPositionTree().then(response => {
                    this.positionOptions = response.data.data;
                });
            },

            getData() {
                this.loading = true
                return selectOne(this.params.id).then(response => {
                    if(ResultMessage(response, false)) {
                        this.loading = false
                        this.form = response.data.data
                        
                        if(response.data.data.orgPath) {
                            const orgIdsStr = response.data.data.orgPath.split(',')
                            for(let str of orgIdsStr) {
                                this.orgIds.push(parseInt(str))
                            }
                        }

                        if(response.data.data.positionPath) {
                            const positionIdsStr = response.data.data.positionPath.split(',')
                            for(let str of positionIdsStr) {
                                this.positionIds.push(parseInt(str))
                            }
                        }
                    } else {
                        this.loading = false
                    }

                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '根据ID获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.loading = false
                })
            },
            create(formName) {//添加数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        created(this.form).then(response => {
                        	if(ResultMessage(response)) {
                                this.$router.go(-1)
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '添加失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },
            update(formName) {//修改数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        updated(this.form).then(response => {
                            if(ResultMessage(response)) {
                                this.$router.go(-1)
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '修改失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },

            handleUploadSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.avatar = file.response.data.url
            },
            handleBeforeUpload(file) {
                /* const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M; */
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            hanldeUploadSuccess(response, file, fileList) {
                this.images = fileList

                if(!response.flag) {
                    this.$notify({
                        type: 'error',
                        title: '文件上传失败',
                        message: file.name,
                        duration: 2000,
                    });
                }
            }
        }
    }

</script>

<style rel="stylesheet/scss" lang="scss">
.detail{
    .el-form-item__content{
        line-height: 0px;
    }
}
.el-tabs__item{
    height: 50px;
    line-height: 50px;
}
.el-radio-group{
    .el-radio{
        margin-bottom: 5px;
    }
}
.el-cascader-menu{
    width: 200px;
}

.avatar-box{
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../../assets/styles/common";
    
    .add_page_container {
        padding: 10px 0;
        border: 1px solid #e8eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all 0.2s ease-in-out;
        &:hover {
            border-color: #eee;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        }
        .title {
            height: 48px;
            line-height: 40px;
            padding-left: 10px;
            border-bottom: 2px solid #e4e7ed;
            margin-bottom: 10px;
        }

        .body{
            padding: 10px 20px 10px 10px;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all 0.2s ease-in-out;
        }
    }
    
        
        
</style>